<template>
  <div class="page">
    <!-- 顶部统计卡片 -->
    <div class="stats-cards">
      <el-card class="stats-card stats-card--blue p-16">
        <div slot="header" class="card-header">用户总数</div>
        <div class="card-content">
          <div class="card-left">
            <el-icon class="card-icon"><User /></el-icon>
          </div>
          <div class="card-right">
            <div class="big-number m-b-8 m-r-16">5,735</div>
            <div class="small-text">
              用户数量：5735
              <span class="trend">↑20%</span>
            </div>
          </div>
        </div>
      </el-card>

      <el-card class="stats-card stats-card--green p-16">
        <div slot="header" class="card-header">课程总数</div>
        <div class="card-content">
          <div class="card-left">
            <el-icon class="card-icon"><Memo /></el-icon>
          </div>
          <div class="card-right">
            <div class="big-number m-b-8 m-r-16">18</div>
            <div class="small-text">
              已上架：18
              <span class="trend">↑13%</span>
            </div>
          </div>
        </div>
      </el-card>

      <el-card class="stats-card stats-card--orange p-16">
        <div slot="header" class="card-header">文章总数</div>
        <div class="card-content">
          <div class="card-left">
            <el-icon class="card-icon"><Document /></el-icon>
          </div>
          <div class="card-right">
            <div class="big-number m-b-8 m-r-16">114</div>
            <div class="small-text">
              已发布：114
              <span class="trend">↑24%</span>
            </div>
          </div>
        </div>
      </el-card>

      <el-card class="stats-card stats-card--gray p-16">
        <div slot="header" class="card-header">面试题总数</div>
        <div class="card-content">
          <div class="card-left">
            <el-icon class="card-icon"><EditPen /></el-icon>
          </div>
          <div class="card-right">
            <div class="big-number m-b-8 m-r-16">182</div>
            <div class="small-text">
              已收录：182
              <span class="trend">↑28%</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 主要内容区域：左侧图表，右侧表格 -->
    <div class="main-container">
      <!-- 左侧：两个图表上下排列 -->
      <div class="left-container">
        <el-card class="chart-card">
          <div slot="header" class="chart-header">用户日活量统计</div>
          <div class="chart-content">
            <div ref="dailyActiveRef" class="chart-wrapper"></div>
          </div>
        </el-card>

        <el-card class="chart-card mt-20">
          <div slot="header" class="chart-header">用户注册增长量对比</div>
          <div class="chart-content">
            <div ref="registrationGrowthRef" class="chart-wrapper"></div>
          </div>
        </el-card>
      </div>

      <!-- 右侧：两个表格上下排列 -->
      <div class="right-container">
        <el-card class="table-card">
          <div slot="header" class="table-header">用户活跃详情</div>
          <div class="table-content">
            <el-table
              :data="activeUserDetail"
              border
              style="width: 100%"
              highlight-current-row
              size="small"
            >
              <el-table-column
                prop="date"
                label="日期"
                align="center"
                width="100"
              ></el-table-column>
              <el-table-column prop="activeUsers" label="活跃用户" align="center" width="110">
                <template #default="scope">
                  <span class="highlight">{{ scope.row.activeUsers }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="newUsers"
                label="新增活跃"
                align="center"
                width="110"
              ></el-table-column>
              <el-table-column prop="rate" label="活跃率" align="center" width="110">
                <template #default="scope">
                  <el-progress
                    :percentage="scope.row.rate"
                    :stroke-width="6"
                    style="width: 80px"
                  ></el-progress>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>

        <el-card class="table-card mt-20">
          <div slot="header" class="table-header">用户增长详情</div>
          <div class="table-content">
            <el-table
              :data="growthDetail"
              border
              style="width: 100%"
              highlight-current-row
              size="small"
            >
              <el-table-column
                prop="month"
                label="月份"
                align="center"
                width="100"
              ></el-table-column>
              <el-table-column prop="newUsers" label="新增用户" align="center" width="110">
                <template #default="scope">
                  <span class="highlight">{{ scope.row.newUsers }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="growthRate" label="增长率" align="center" width="110">
                <template #default="scope">
                  <span class="growth-rate">{{ scope.row.growthRate }}%</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="totalUsers"
                label="累计用户"
                align="center"
                width="110"
              ></el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, Ref, onUnmounted } from "vue";
import * as echarts from "echarts";
import { User, Memo, Document, EditPen } from "@element-plus/icons-vue";

// 静态模拟数据 - 用户日活量（过去7天）
const dailyActiveData = {
  days: ["1月1日", "1月2日", "1月3日", "1月4日", "1月5日", "1月6日", "1月7日"],
  activeUsers: [1250, 1380, 1120, 1560, 1680, 1420, 1850],
};

// 静态模拟数据 - 用户注册增长量（过去6个月）
const registrationGrowthData = {
  months: ["8月", "9月", "10月", "11月", "12月", "1月"],
  newUsers: [520, 680, 750, 920, 1150, 1380],
};

// 用户活跃详情表格数据
const activeUserDetail = [
  { date: "1月1日", activeUsers: 1250, newUsers: 210, rate: 68 },
  { date: "1月2日", activeUsers: 1380, newUsers: 245, rate: 72 },
  { date: "1月3日", activeUsers: 1120, newUsers: 180, rate: 65 },
  { date: "1月4日", activeUsers: 1560, newUsers: 290, rate: 76 },
  { date: "1月5日", activeUsers: 1680, newUsers: 320, rate: 80 },
  { date: "1月6日", activeUsers: 1420, newUsers: 250, rate: 74 },
  { date: "1月7日", activeUsers: 1850, newUsers: 380, rate: 85 },
];

// 用户增长详情表格数据
const growthDetail = [
  { month: "8月", newUsers: 520, growthRate: 12, totalUsers: 2850 },
  { month: "9月", newUsers: 680, growthRate: 15, totalUsers: 3530 },
  { month: "10月", newUsers: 750, growthRate: 18, totalUsers: 4280 },
  { month: "11月", newUsers: 920, growthRate: 23, totalUsers: 5200 },
  { month: "12月", newUsers: 1150, growthRate: 28, totalUsers: 6350 },
  { month: "1月", newUsers: 1380, growthRate: 31, totalUsers: 7730 },
];

// 图表引用
const dailyActiveRef: Ref<HTMLDivElement | null> = ref(null);
const registrationGrowthRef: Ref<HTMLDivElement | null> = ref(null);

// 图表实例
let dailyActiveChart: echarts.ECharts | null = null;
let registrationChart: echarts.ECharts | null = null;

onMounted(() => {
  initDailyActiveChart();
  initRegistrationGrowthChart();
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  dailyActiveChart?.dispose();
  registrationChart?.dispose();
});

// 窗口大小变化时重绘图表
const handleResize = () => {
  dailyActiveChart?.resize();
  registrationChart?.resize();
};

// 初始化用户日活量图表
const initDailyActiveChart = () => {
  if (!dailyActiveRef.value) return;

  if (dailyActiveChart) dailyActiveChart.dispose();
  dailyActiveChart = echarts.init(dailyActiveRef.value);

  const option: echarts.EChartsOption = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: "{b}: {c} 人",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: dailyActiveData.days,
      axisLabel: {
        rotate: 30,
        interval: 0,
      },
    },
    yAxis: {
      type: "value",
      name: "用户数",
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
    },
    series: [
      {
        name: "日活用户",
        type: "bar",
        data: dailyActiveData.activeUsers,
        itemStyle: {
          color: "#3f96f4",
          borderRadius: [4, 4, 0, 0],
        },
        label: {
          show: true,
          position: "top",
          formatter: "{c}",
        },
        barWidth: "60%",
      },
    ],
  };

  dailyActiveChart.setOption(option);
};

// 初始化用户注册增长量图表
const initRegistrationGrowthChart = () => {
  if (!registrationGrowthRef.value) return;

  if (registrationChart) registrationChart.dispose();
  registrationChart = echarts.init(registrationGrowthRef.value);

  const option: echarts.EChartsOption = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["新增用户数", "增长率(%)"],
      top: 0,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: registrationGrowthData.months,
    },
    yAxis: [
      {
        type: "value",
        name: "新增用户数",
        position: "left",
        splitLine: {
          lineStyle: {
            type: "dashed",
          },
        },
      },
      {
        type: "value",
        name: "增长率",
        position: "right",
        axisLabel: {
          formatter: "{value}%",
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "新增用户数",
        type: "bar",
        data: registrationGrowthData.newUsers,
        itemStyle: {
          color: "#4ad6cc",
          borderRadius: [4, 4, 0, 0],
        },
        label: {
          show: true,
          position: "top",
          formatter: "{c}",
        },
        barWidth: "50%",
      },
      {
        name: "增长率(%)",
        type: "line",
        yAxisIndex: 1,
        itemStyle: {
          color: "#ff8800",
        },
        lineStyle: {
          color: "#ff8800",
        },
        symbol: "circle",
        symbolSize: 8,
        label: {
          show: true,
          formatter: "{c}%",
        },
      },
    ],
  };

  registrationChart.setOption(option);
};
</script>

<style scoped>
.page {
  min-width: 1200px;
  padding: 28px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.page::-webkit-scrollbar {
  display: none;
}

.stats-cards {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 28px;
}

.stats-card {
  display: flex;
  flex: 1 0 22%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 228px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.stats-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.stats-card--blue {
  background: linear-gradient(135deg, #b3d8ff 0%, #3f96f4 100%);
}

.stats-card--green {
  background: linear-gradient(135deg, #c2f0d0 0%, #4ad6cc 100%);
}

.stats-card--orange {
  background: linear-gradient(135deg, #fcd9b0 0%, #ff8800 100%);
}

.stats-card--gray {
  background: linear-gradient(135deg, #d9d9d9 0%, #928c8c 100%);
}

.card-header {
  font-size: 24px;
  color: #fff;
  text-align: center;
}

.card-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-left {
  padding: 20px 0px 28px 0;
}

.card-icon {
  font-size: 64px;
  color: rgba(255, 255, 255, 0.8);
}

.card-right {
  padding-right: 48px;
}

.big-number {
  margin-left: 48px;
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.small-text {
  margin-right: 28px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.trend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #10b981;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 主内容区域布局 */
.main-container {
  display: flex;
  gap: 20px;
  width: 100%;
  margin-top: 20px;
}

.left-container,
.right-container {
  flex: 1;
}

/* 图表卡片样式 */
.chart-card {
  overflow: hidden;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.chart-header {
  padding: 12px 20px;
  font-size: 18px;
  font-weight: 500;
  color: #303133;
  border-bottom: 1px solid #f2f2f2;
}

.chart-content {
  padding: 16px;
}

.chart-wrapper {
  width: 100%;
  height: 280px; /* 上下排列时适当减小高度 */
}

/* 表格卡片样式 */
.table-card {
  height: 403.89px;
  overflow: hidden;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.table-header {
  padding: 12px 20px;
  font-size: 18px;
  font-weight: 500;
  color: #303133;
  border-bottom: 1px solid #f2f2f2;
}

.table-content {
  padding: 32px 0;
}

/* 表格内容样式 */
.el-table {
  padding-left: 250px;
  overflow: hidden;
  font-size: 16px;
  border-radius: 6px;
}

.el-table th {
  font-weight: 500;
  color: #606266;
  background-color: #f9fafb;
}

.el-table tr:hover > td {
  background-color: #f5f7fa !important;
}

.highlight {
  font-weight: 500;
  color: #3f96f4;
}

.growth-rate {
  font-weight: 500;
  color: #ff8800;
}

/* 间距辅助类 */
.mt-20 {
  margin-top: 20px;
}

/* 进度条样式调整 */
.el-progress {
  vertical-align: middle;
}

.el-progress__text {
  display: none; /* 隐藏进度条文本，保持简洁 */
}
</style>
